<!-- 热门推荐 -->
<script lang='ts' setup>
import lunbotuVue from '../icons/lunbotu.vue';
import { ref } from 'vue'
let lunbotuData = [
    { title: '让血液沸腾', name: 'dangerous', intro: `不极限，怎青春？世界上不要命的运动特别多，它们有一个统称——极限运动！从徒手攀岩到潜水探洞，惊险、刺激、高难度，几乎成为极限运动的代名词，越来越多的户外人儿去寻求这种快感。` },
    { title: '舒适安逸', name: 'beautyLife', intro: ` 天色渐亮，阳光四射，驱散本来就无根的雾气。整个村子忽然就活了过来。农人早起，无非两件事，倒夜香，烧早饭。这地方人家的茅厕往往就在河边，男女主人各行其事，并行不悖，倒也不觉任何不妥。稍后，村里鸡飞狗跳，学生上学，农人下地，工人做工。` },
]
//获取子组件传来的url
const iframeUrl = ref('')
const iframeShow = ref(false)
function getup(val: any) {
    if (val == '' || val == null || val == undefined) {
        return
    }
    iframeShow.value = true
    iframeUrl.value = val
}

//监听键盘事件
window.document.onkeydown = function (event) {
    if (event.code === 'Escape') {
        iframeShow.value = false
    }
}
</script>
<template>
    <div id="recommend">
        <!--  头部轮播图 -->
        <div id="rec_head">
            <el-carousel :interval="4000" type="card" height="400px">
                <el-carousel-item v-for="item in 6" :key="item">
                    <h3 justify="center">{{ item }}</h3>
                </el-carousel-item>
            </el-carousel>
        </div>
        <!-- 各分类 -->
        <div id="rec_hot" v-for="item in lunbotuData">
            <h2 class="title">{{ item.title }}</h2>
            <div class="hot_item">
                <lunbotuVue class="recClassify" :meat="item.name" @getup="getup">
                </lunbotuVue>
                <div class="intro">
                    <p style="color:gray;margin-bottom: 15px;">(点击图片可查看相关介绍哦,介绍面版ESC,未聚焦状态可关闭)</p>
                    <p> {{ item.intro }}</p>
                </div>
            </div>
        </div>
        <div class="iframes" v-if="iframeShow">
            <iframe :src="iframeUrl" frameborder="0" marginheight="0" marginwidth="0"></iframe>
        </div>
    </div>
</template>
<style lang='scss' scoped>
.iframes {
    position: fixed;
    top: 50px;
    transform: translateY(-50%);
    left: 55%;
    transform: translateX(-50%);
    width: 60vw;
    height: 800px;
    z-index: 9;

    iframe {
        width: 100%;
        height: 100%;
        width: 950px;
        display: block;
        border-radius: 10px;
        box-shadow: 1px 1px 5px 2px rgba(0, 0, 255, .2);
    }
}

#recommend {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
}

#rec_head {
    width: 1400px;

    .el-carousel__item h3 {
        color: #475669;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
        text-align: center;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n + 1) {
        background-color: #d3dce6;
    }
}

#rec_hot {
    width: 1200px;

    .title {
        margin: 20px 0px -10px 20px;
        background: linear-gradient(#e60505, #f5c906);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
    }

    .hot_item {
        margin: 20px auto;
        display: flex;
        width: 1150px;
        height: 300px;

        .recClassify {
            flex: 2;
        }

        .intro {
            flex: 3;
            box-sizing: border-box;
            padding: 30px;
            text-indent: 2em;
            background-color: rgb(224, 243, 241);
        }
    }
}
</style>
